<template>
  <Dialog :title="currentRow.id ? '修改医院':'增加医院'" class="single-column" :loading="loading" :visible="visible" button-text="保存" @close="handleClose" @confirm="handleConfirm">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="名称：" prop="hospitalName">
        <el-input v-model="ruleForm.hospitalName" style="width: 235px;" />
      </el-form-item>
      <el-form-item label="位置：">
        <el-input v-model="ruleForm.address" style="width: 235px;" />
      </el-form-item>
      <el-form-item label="联系人：">
        <el-input v-model="ruleForm.contact" style="width: 235px;" />
      </el-form-item>
      <el-form-item label="联系电话：" prop="tel">
        <el-input v-model="ruleForm.tel" style="width: 235px;" />
      </el-form-item>
      <!-- <el-form-item label="管理员：" prop="master">
        <el-select v-model="ruleForm.master" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="状态：" prop="hospitalStatus">
        <el-radio v-model="ruleForm.hospitalStatus" label="启用" />
        <el-radio v-model="ruleForm.hospitalStatus" label="停用" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog";
export default {
  components: { Dialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    currentRow: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    // var validatorPhone = (rule, value, callback) => {
    //   if (!value) {
    //     callback();
    //   } else if (!/^1\d{10}$/.test(value)) {
    //     callback(new Error('手机号格式错误'));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      ruleForm: {
        hospitalStatus: '启用',
      },
      value: '',
      options: [{
        value: '王麻子',
        label: '王麻子',
      }],
      rules: {
        hospitalName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        // tel: [
        //   { required: false, validator: validatorPhone, trigger: 'blur' },
        // ],
        // master: [
        //   { required: true, message: '请输入管理员名称', trigger: 'blur' },
        // ],
      },
      loading: false,
    };
  },
  watch: {
    currentRow: {
      handler(val) {
        this.ruleForm = val;
      },
      deep: true,
    },
    visible: {
      handler(val) {
        if (val && !this.currentRow.id) this.ruleForm = { status: '启用', hospitalStatus: '启用' };
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('update:currentRow', {});
      this.$refs.ruleForm.resetFields();
      this.ruleForm = {};
    },
    handleConfirm() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        this.loading = true;
        this.ruleForm.hisName = this.ruleForm.hospitalName;
        if (this.currentRow.id) {
          this.$api[`data/hospital/update`](this.ruleForm).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('修改医院成功');
            this.handleClose();
          }).finally(() => (this.loading = false));
        } else {
          this.$api[`data/hospital/create`]({
            ...this.ruleForm,
          }).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('增加医院成功');
            this.handleClose();
          }).finally(() => (this.loading = false));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>
